<template>
  <div class="shop">
      <div class="left">
          <el-menu
            class="el-menu-vertical-demo"
            background-color="#fff"
            text-color="#333"
            active-text-color="#333">
            <el-submenu 
              v-for="(item,index) in route"
              :key="index"
              @click="goLink(item)"
              :index="item.path">
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{item.name}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  v-for="(itemc,indexc) in item.children"
                  :key="indexc"
                  @click="goLink(itemc)"
                  :index="itemc.path"
                  >
                  <span>{{itemc.name}}</span>
                  </el-menu-item>
              </el-menu-item-group>
            </el-submenu index="1"> 
          </el-menu>
      </div>
      <div class="right">
        <router-view></router-view>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      route:[
        {
            name:"库存",
            path:"/report",
            icon:"el-icon-menu",
            children:[
              {
                  name:"库存台账",
                  path:"/report/stock/stock-info",
                  icon:"el-icon-menu"
              },
              {
                  name:"盘点表",
                  path:"/report/stock/inventory",
                  icon:"el-icon-menu"
              }
            ]
        },
        {
            name:"进货",
            path:"/report/purchase/purchase-info",
            icon:"el-icon-menu",
            children:[
              {
                  name:"进货明细",
                  path:"/report/purchase/purchase-info",
                  icon:"el-icon-menu"
              },
              {
                  name:"预售合同",
                  path:"/report/purchase/agreement",
                  icon:"el-icon-menu"
              }
            ]
        },
        {
            name:"销货",
            path:"/report/sales/sales-info",
            icon:"el-icon-menu",
            children:[
              {
                  name:"销售明细表",
                  path:"/report/sales/sales-info",
                  icon:"el-icon-menu"
              },
              {
                  name:"利润表",
                  path:"/report/sales/profix",
                  icon:"el-icon-menu"
              }
            ]
        }
      ]
    }
  },
  methods:{
    goLink(item){
      this.$router.push({path:item.path})
    }
  }
}
</script>
<style scoped>
  .shop{
    flex:1;
  }
  .left{
    width: 200px;
    background-color: #fff;
    overflow: hidden;
    height: 100%;
    border-right: 1px solid #f2f2f2;
    box-sizing: border-box;
  }
  .right{
    background-color: fff;
    overflow: hidden;
    padding: 0 24px;
    box-sizing: border-box;
    width: 1200px;
  }
  .shop{
    display: flex;
    flex-direction: row;
  }
</style>
